<template>
  <div class="hello">
    <el-row :gutter="24">
      <el-col :span="4">
        <div class="grid">
          <p @click="addCustom">
            <img src="../../assets/header.png" alt="" />
            <span>添加客户</span>
          </p>
          <p style="margin-top:30px;" @click="queryCus">
            <img src="../../assets/search.png" alt="" />
            <span>查询客户</span>
          </p>
        </div>
      </el-col>
      <!-- v-if="parArray.indexOf('wdsjbb') != -1" -->
      <el-col :span="20">
        <div class="dataDisplay">
          <div class="header">
            <p class="float-left">我的数据</p>
            <p class="float-right" style="margin-left:10px">
              <el-button type="primary" size="mini" @click="reflesh"
                >刷新</el-button
              >
            </p>
            <p class="float-right">
              <el-date-picker
                v-model="value4"
                type="daterange"
                :picker-options="pickerOptions2"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </p>
          </div>
          <div class="colDate">
            <div class="col">
              <p>团队跟进客户数</p>
              <div>{{ myData.teamFollowNumber }}</div>
              <span>{{ myData.teamFollowNumberFluctuationRate }}</span>
            </div>

            <div class="col">
              <p>团队下单客户数</p>
              <div>{{ myData.teamCustomerOrders }}</div>
              <span>{{ myData.teamCustomerOrdersFluctuationRate }}</span>
            </div>

            <div class="col">
              <p>团队订单金额</p>
              <div>{{ myData.teamOrderMoney }}</div>
              <span>{{ myData.teamOrderMoneyFluctuationRate }}</span>
            </div>

            <div class="col">
              <p>下单客户数</p>
              <div>{{ myData.customerOrders }}</div>
              <span>{{ myData.customerOrdersFluctuationRate }}</span>
            </div>
            <div class="col">
              <p>订单金额</p>
              <div>{{ myData.orderMoney }}</div>
              <span>{{ myData.orderMoneyFluctuationRate }}</span>
            </div>
            <div class="col">
              <p>跟进客户数</p>
              <div>{{ myData.followNumber }}</div>
              <span>{{ myData.followNumberFluctuationRate }}</span>
            </div>
            <div class="col">
              <p>团队占比</p>
              <div>{{ myData.teamPercentage }}</div>
              <!-- <span>+{{myData.teamFollowNumberFluctuationRate}}</span> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- v-if="parArray.indexOf('xlpmbb') != -1" -->
    <el-row :gutter="24" class="graphical">
      <el-col :span="12" class="el-col_style">
        <div class="group" v-show="employeeData">
          <div class="groupTitle">
            <span>员工排名</span>
            <p></p>
          </div>
          <div class="echart1">
            <div id="mainEchart1" style="width:100%;height:400px;"></div>
          </div>
        </div>
      </el-col>
      <!-- v-if="parArray.indexOf('xzpmbb') != -1" -->
      <el-col :span="12" class="el-col_style">
        <div class="group" v-show="groupData">
          <div class="groupTitle">
            <span>小组排名</span>
            <p></p>
          </div>
          <div class="echart2">
            <div id="mainEchart2" style="width:100%;height:400px;"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- v-if="parArray.indexOf('khdqbb') != -1" -->
    <ul class="baseInformation">
      <li class="float-left">
        <div class="group1" v-show="huaxiang">
          <div class="groupTitle">
            <span>用户画像</span>
            <p></p>
          </div>
          <div class="echartline">
            <div id="chartLineBox" style="width: 100%;height: 400px;"></div>
          </div>
        </div>
      </li>
      <!-- v-if="parArray.indexOf('khrxfsbb') != -1" -->
      <li class="float-left">
        <div class="group1" v-show="linedata">
          <div class="groupTitle">
            <span>入线方式</span>
            <p></p>
          </div>
          <div class="echartline">
            <div id="Incoming" style="width: 100%;height: 400px;"></div>
          </div>
        </div>
      </li>
      <!-- v-if="parArray.indexOf('khnlbb') != -1" -->
      <li class="float-left">
        <div class="group1" v-show="ageData">
          <div class="groupTitle">
            <span>年龄</span>
            <p></p>
          </div>
          <div class="echartline">
            <div id="agesEcharts" style="width: 100%;height: 400px;"></div>
          </div>
        </div>
      </li>
      <!-- v-if="parArray.indexOf('khxbbb') != -1" -->
      <li class="float-left">
        <div class="group1" v-show="sexData">
          <div class="groupTitle">
            <span>性别</span>
            <p style="width:40px;"></p>
          </div>
          <div class="echartline">
            <div id="genderEcharts" style="width: 100%;height: 400px;"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "home",
  props: {
    msg: String,
  },
  data() {
    return {
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value4: "",
      beginTime: "",
      endTime: "",
      line: "", //入线方式
      limits: "",
      parArray: [],
      //数据判断
      huaxiang: false,
      linedata: "",
      ageData: "",
      sexData: "",
      myData: "",
      groupData: "",
      employeeData: "", //个人排名
      refres: "",
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("mainEchart1"),
      null,
      { renderer: "svg" }
    );

    this.mainEchart2 = this.$echarts.init(
      document.getElementById("mainEchart2"),
      null,
      { renderer: "svg" }
    );
    this.chartLineBox = this.$echarts.init(
      document.getElementById("chartLineBox"),
      null,
      { renderer: "svg" }
    );
    this.Incoming = this.$echarts.init(
      document.getElementById("Incoming"),
      null,
      { renderer: "svg" }
    );
    this.agesEcharts = this.$echarts.init(
      document.getElementById("agesEcharts"),
      null,
      { renderer: "svg" }
    );
    this.genderEcharts = this.$echarts.init(
      document.getElementById("genderEcharts"),
      null,
      { renderer: "svg" }
    );
  },
  activated() {
    this.resizeT();
  },
  created() {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    if (!this.is_null(this.limits)) {
      const params = this.limits.buttonTreeDto.filter(
        (item) => item.menuCode === "unusualOrderCode"
      );
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
    }
    // 权限设定判断
    this.reportLine(this.beginTime, this.endTime); //入线方式
    this.genderReport(this.beginTime, this.endTime); //性别
    this.userPortrait(this.beginTime, this.endTime); //用户画像
    this.ageReport(this.beginTime, this.endTime); //年龄报表
    this.totalData(this.beginTime, this.endTime);
    this.groupRanking();
    this.employeeRanking(); //部门排名
  },
  updated() {
    this.resizeT();
  },
  methods: {
    resizeT() {
      if (this.myChart) {
        this.myChart.resize();
      }
      if (this.mainEchart2) {
        this.mainEchart2.resize();
      }
      if (this.chartLineBox) {
        this.chartLineBox.resize();
      }
      if (this.Incoming) {
        this.Incoming.resize();
      }
      if (this.agesEcharts) {
        this.agesEcharts.resize();
      }
      if (this.genderEcharts) {
        this.genderEcharts.resize();
      }
      window.onresize = () => {
        if (this.myChart) {
          this.myChart.resize();
        }
        if (this.mainEchart2) {
          this.mainEchart2.resize();
        }
        if (this.chartLineBox) {
          this.chartLineBox.resize();
        }
        if (this.Incoming) {
          this.Incoming.resize();
        }
        if (this.agesEcharts) {
          this.agesEcharts.resize();
        }
        if (this.genderEcharts) {
          this.genderEcharts.resize();
        }
      };
    },
    is_null(content) {
      if (
        content
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 添加客户
    addCustom() {
      this.$router.push({
        name: "addCustomer",
      });
    },
    queryCus() {
      this.$router.push({
        name: "myCustomers",
      });
    },
    // 刷新
    reflesh() {
      let beginTime = this.value4[0];
      let endTime = this.value4[1];
      this.totalData(beginTime, endTime);
      this.reportLine(beginTime, endTime);
      this.genderReport(beginTime, endTime);
      this.userPortrait(beginTime, endTime);
      this.ageReport(beginTime, endTime);
    },
    // 我的数据
    totalData(beginTime, endTime) {
      this.axios
        .post(
          "/order/v1/home/my/data/report",
          {
            request: {
              beforeEndTime: "",
              beforeStartTime: "",
              endTime: endTime,
              orgPath: "",
              startTime: beginTime,
              userId: "",
              userIdList: [],
            },
            version: "",
          },
          {
            headers: {
              isLoading: true,
            },
          }
        )
        .then((res) => {
          // console.log("我的数据");
          // 	console.log(res);
          if (res.code == 0) {
            this.myData = res.data;
          } else {
          }
        });
    },
    //我的数据

    // 客户入线方式报表
    reportLine(beginTime, endTime) {
      this.axios
        .post(
          "/order/v1/home/customerChannel/line",
          {
            request: {
              dataScope: "",
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("客户入线方式报表");
          if (res.code == 0) {
            // console.log(res);
            if (!this.is_null(res.data)) {
              this.linedata = true;
            } else {
              this.linedata = false;
            }
            this.IncomingEcharts(res.data); //入线方式
          } else {
          }
        });
    },

    // 性别统计
    genderReport(beginTime, endTime) {
      this.axios
        .post(
          "/order/v1/home/customerSex/line",
          {
            request: {
              dataScope: "",
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("性别统计");
          if (res.code == 0) {
            // console.log(res.data);
            // this.sexData=res.data;
            if (!this.is_null(res.data)) {
              this.sexData = true;
            } else {
              this.sexData = false;
            }
            this.genderRectangles(res.data); //性别条形图式
          } else {
          }
        });
    },

    // 用户画像 User
    userPortrait(beginTime, endTime) {
      this.axios
        .post(
          "/order/v1/home/customerArea/line",
          {
            request: {
              dataScope: "",
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("用户画像");
          if (res.code == 0) {
            // this.huaxiang = res.data;
            if (!this.is_null(res.data)) {
              this.huaxiang = true;
            } else {
              this.huaxiang = false;
            }
            this.lineCharts(res.data); //性别条形图式
          } else {
          }
        });
    },

    // 年龄条形图
    ageReport(beginTime, endTime) {
      this.axios
        .post(
          "/order/v1/home/customerAge/line",
          {
            request: {
              dataScope: "",
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("年龄条形图");
          if (res.code == 0) {
            // console.log(res);
            // this.ageData=res.data;
            if (!this.is_null(res.data)) {
              this.ageData = true;
            } else {
              this.ageData = false;
            }
            this.agesRectangles(res.data); //年龄条形图;
          } else {
          }
        });
    },

    // 小组排名
    groupRanking() {
      this.axios
        .get("/order/v1/home/group/ranking", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          // console.log("小组排名")
          if (res.code == 0) {
            if (!this.is_null(res.data)) {
              this.groupData = true;
            } else {
              this.groupData = false;
            }
            this.groupChart(res.data);
          } else {
          }
        });
    },
    // 个人排名
    employeeRanking() {
      this.axios
        .get("/order/v1/home/employee/sale/ranking", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          // console.log("个人排名")
          if (res.code == 0) {
            if (!this.is_null(res.data)) {
              this.employeeData = true;
            } else {
              this.employeeData = false;
            }
            this.myEcharts(res.data);
          } else {
          }
        });
    },
    // 员工排名
    myEcharts(param) {
      var xdata = [];
      let param1 = param.slice(0, 7);
      var ydata = [];
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push(item.value);
      });
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("mainEchart1"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "",
        },
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: 30,
            data: ydata,
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: "#FF8EFF",
                width: 6 + "px",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    // 第二个条形图
    groupChart(param) {
      var xdata = [];
      let param1 = param.slice(0, 7);
      var ydata = [];
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push(item.value);
      });

      this.myChart1 = this.$echarts.init(
        document.getElementById("mainEchart2")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: 30,
            data: ydata,
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: "#FF8EFF",
                width: 6 + "px",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option);
    },

    //用户画像--地址
    lineCharts(param) {
      var xdata = [];
      let param1 = param.slice(0, 7);
      var ydata = [];
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push(item.value);
      });
      this.chartLineBox = this.$echarts.init(
        document.getElementById("chartLineBox")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: ydata,
            type: "line",
            color: "#2D7EDF",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineBox.setOption(option);
    },
    // 入线方式
    IncomingEcharts(param) {
      var xAxisline = [];
      var ydata = [];
      let param1 = param.slice(0, 7);
      param1.forEach((item) => {
        xAxisline.push(item.label);
        ydata.push(item.value);
      });
      this.Incoming = this.$echarts.init(document.getElementById("Incoming"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisline,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: ydata,
            type: "line",
            color: "#2D7EDF",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.Incoming.setOption(option);
    },
    // 年龄矩形图
    agesRectangles(param) {
      var xdata = [];
      var ydata = [];
      let param1 = param.slice(0, 7);
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push(item.value);
      });
      this.agesEcharts = this.$echarts.init(
        document.getElementById("agesEcharts")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
        },
        yAxis: {},
        series: [
          {
            name: "年龄统计",
            type: "bar",
            barWidth: 30,
            data: ydata,
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: "#2D7EDF",
                width: 6 + "px",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.agesEcharts.setOption(option);
    },
    //性别条形图
    genderRectangles(param) {
      var xdata = [];
      var ydata = [];
      param.forEach((item) => {
        xdata.push(item.label);
        ydata.push(item.value);
      });
      this.genderEcharts = this.$echarts.init(
        document.getElementById("genderEcharts")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
        },
        yAxis: {},
        series: [
          {
            name: "性别比例",
            type: "bar",
            barWidth: 30,
            data: ydata,
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: "#2D7EDF",
                width: 6 + "px",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.genderEcharts.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.grid {
  padding: 18px 30px;
  background: rgba(255, 255, 255, 1);
  min-width: 120px;

  p {
    text-align: center;
    margin: 20px auto;
    padding: 8px 0;
    background: #2d7edf;
    border-radius: 5px;

    img {
      width: 22px;
      height: 18px;
      display: inline-block;
      vertical-align: middle;
    }

    span {
      font-size: 15px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}

.dataDisplay {
  background: #fff;
  clear: both;

  .header {
    height: 30px;
    line-height: 30px;
    padding: 10px;
    border-bottom: 1px solid #eee;

    p {
      font-size: 18px;
    }
  }

  .el-input__inner {
    // width:240px;
    height: 30px;
    line-height: 30px !important;
  }
}

.colDate {
  width: 98%;
  padding: 10px;
  height: 116px;
  display: flex;
  justify-content: space-around;
  vertical-align: middle;

  > .col {
    // width: 25%;
    text-align: center;

    p {
      color: #333333;
      font-size: 16px;
      margin-bottom: 10px;
    }

    div {
      color: #fe1800;
      font-size: 30px;
    }

    span {
      color: #fe1800;
      font-size: 18px;
      display: inline-block;
      margin-top: 10px;
    }
  }
}

/deep/ .el-icon-time {
  line-height: 23px !important;
}

/deep/ .el-date-editor .el-range__icon {
  line-height: 23px !important;
}

/deep/ .el-date-editor .el-range-separator {
  line-height: 25px !important;
}

/deep/ .el-date-editor .el-range__close-icon {
  line-height: 24rpx !important;
  padding-bottom: 10px;
}

.el-col_style {
  width: 50%;
}

.graphical {
  margin-top: 20px;

  .group {
    background: #fff;
    width: 100%;
    padding: 10px;

    .groupTitle {
      width: 100%;

      span {
        font-size: 16px;
        color: #333333;
      }

      p {
        width: 72px;
        height: 4px;
        margin-top: -7px;
        background: rgba(130, 187, 255, 1);
      }
    }
  }

  #mainEchart1 {
    margin: 0 auto;
    background: #fff;
  }

  #mainEchart2 {
    margin: 0 auto;
    background: #fff;
  }
}

.baseInformation {
  background: #fff;
  margin: 20px 0;

  li {
    width: 50%;
  }

  .echartline {
    margin: 0 auto;
    width: 100%;
  }

  .group1 {
    background: #fff;
    width: 100%;
    padding: 10px;

    .groupTitle {
      width: 100%;

      span {
        font-size: 16px;
        color: #333333;
      }

      p {
        width: 72px;
        height: 4px;
        margin-top: -7px;
        background: rgba(130, 187, 255, 1);
      }
    }
  }
}
</style>
